import React, { Component } from 'react'

export default class AppFrom extends Component {

  handleDelete = () => {
    console.log("handleDelete")
  }

  handleListOver = (index) => {
    console.log(index)
  }
  handleListOut = (index) => {
    console.log(index)
  }

  render() {
    const list = this.props.data.map((item, index) => {
      return (
        <div key={index}
          style={{ fontSize: 18, padding: '10 0' }}
          onMouseOver={() => this.handleListOver(index)}
          onMouseOut={() => this.handleListOut(index)}>
          <span style={{ paddingRight: 20 }}>{item.id}</span>
          <span>{item.text}</span>
          <span className={item.complete ? "" : ""}></span>
          <span style={{ "color": "red", "float": "right" }} onClick={() => { this.handleDelete() }}>X</span>
        </div>
      )
    })

    return (
      <div>
        {list}
      </div>
    )
  }
}